<template>
  <view class="index">
    <view class="height"></view>
    <Detail :car="detail" />
    <view class="bottom-btn">
      <button @tap="contactPhone" v-show="isShowPhone">电话联系</button>
      <button class="dock-btn" @tap="dockSuccess" v-show="isShowDock">
        对接成功
      </button>
    </view>
    <van-dialog id="van-dialog" />
  </view>
</template>

<script>
import Detail from '@components/business/find/detail/detail'
import { getFindDetail, dockFind } from '@requests/business'
import { call, getParam, goBack, navigateTo, toast } from '@utils/index'
import Dialog from '@components/vant-weapp/dist/dialog/dialog'
import store from '../../../../store/index'

export default {
  name: 'FindDetail',
  data() {
    return {
      detail: {},
      user_id: store.state.user.userInfo.user_id || ''
    }
  },
  components: {
    Detail
  },
  computed: {
    isShowDock() {
      return (
        this.detail.user_id == this.user_id && this.detail.docking_status == '2'
      )
    },
    isShowPhone() {
      return this.detail.user_id != this.user_id
    },
    titleTxt() {
      return this.detail.look_type_name
    }
  },
  created() {
    this.getDetail()
  },
  onShareAppMessage() {
    return {
      title: this.titleTxt
    }
  },
  methods: {
    //联系
    contactPhone() {
      call(this.detail.contact_mobile)
    },
    //获取寻车详情
    getDetail() {
      getFindDetail(getParam('id')).then(res => {
        this.detail = res.result
      })
    },
    //对接成功
    dockSuccess() {
      Dialog.confirm({
        title: '提示',
        message: '是否停止寻车？'
      })
        .then(() => {
          dockFind({ id: getParam('id') }).then(res => {
            toast.success('操作成功').then(() => {
              goBack()
            })
          })
        })
        .catch(() => {})
    }
  }
}
</script>

<style>
.height {
  width: 100%;
  height: 0.8rem;
  background: #f9f9f9;
}
.bottom-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.625rem 0.8rem;
  background: #fff;
  z-index: 99;
}
.bottom-btn button {
  width: 100%;
  background-color: #fff;
  border: 2rpx solid #006cff;
  border-radius: 12px;
  color: #006cff;
  font-size: 1.02rem;
}
.bottom-btn button.dock-btn {
  background-color: #006cff;
  color: #fff;
}
</style>
